import Tabs from '@/components/Tabs'
import { getAllChannels, getUserChannels } from '@/store/actions/home'
import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import styles from './index.module.scss'
import Icon from '@/components/Icon'
import { Drawer } from 'antd-mobile'
import Channel from './components/Channels'
import ArticleList from './components/ArticleList'
export default function Home() {
  const dispatch = useDispatch()

  // 编辑频道抽屉组件显示状态
  const [open, setOpen] = useState(false)

  const onClose = () => {
    setOpen(false)
  }

  useEffect(() => {
    // 获取频道列表
    dispatch(getUserChannels())
    dispatch(getAllChannels())
  }, [dispatch])

  // 频道列表数据
  const tabs = useSelector((state) => state.home.userChannels)

  // tabs高亮
  const [active, setActive] = useState(0)

  // 频道列表高亮
  const changeActive = (i) => {
    setActive(i)
  }

  return (
    <div className={styles.root}>
      <Tabs
        tabs={tabs}
        index={active}
        onChange={(e) => {
          setActive(e)
        }}
      >
        {tabs.map((item) => (
          <ArticleList
            key={item.id}
            channelId={item.id}
            activeId={tabs[active].id}
          ></ArticleList>
        ))}
      </Tabs>
      <div className="tabs-opration">
        <Icon type="iconbtn_search"></Icon>
        <Icon
          type="iconbtn_channel"
          onClick={() => {
            setOpen(true)
          }}
        ></Icon>
      </div>

      {/* 频道管理抽屉组件 */}
      <Drawer
        className="my-drawer"
        position="left"
        children={''}
        sidebar={
          open && (
            <Channel
              onClose={onClose}
              index={active}
              onChange={changeActive}
            ></Channel>
          )
        }
        open={open}
      ></Drawer>
    </div>
  )
}
